<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-userInfo-edit"
			th:object="${userInfo}">
			<input id="uid" name="uid" th:field="*{uid}" type="hidden">
			<div class="form-group">
				<label class="col-sm-3 control-label">用户名：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="userName"
						id="username" th:field="*{username}" readonly>
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label">姓名：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="name"
						id="name" th:field="*{name}">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
					<div class="onoffswitch">
						<input type="checkbox"
							th:checked="${userInfo.state == 1 ? true : false}"
							class="onoffswitch-checkbox" id="state" name="state"> <label
							class="onoffswitch-label" for="state"> <span
							class="onoffswitch-inner"></span> <span
							class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">职位：</label>
				<div class="col-sm-8">
					<select name="position" id="position" th:field="*{position}" 
					class="form-control"> 
					<option value="1">管理员</option>
					<option value="2">理发师</option>
					<option value="3">收银员</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">角色：</label>
				<div class="col-sm-8">
					<label th:each="role:${roles}" class="check-box"> <input
						name="role" type="checkbox" th:value="${role.roleId}"
						th:text="${role.roleName}" th:checked="${role.flag}"
						th:disabled="${role.status == '1'}">
					</label>
				</div>
			</div>
		</form>
	</div>
	<div th:include="include::footer"></div>
	<script type="text/javascript">
		
		$("#form-userInfo-edit").validate({
			rules:{
				username:{
					required:true,
				},
				name : {
					required : true,
					
				},
				
			}
		});
		
		
		function submitHandler() {
	        if ($.validate.form()) {
	          edit();
	        }
	    };
		 function edit() {
			    var uid = $("input[name='uid']").val();        	
	        	var username = $("input[name='username']").val();
	        	var name = $("input[name='name']").val();	
	        	var state = $("input[name='state']").is(':checked') == true ? 1 : 2;
	        	var position = $('#position').val();
	        	
	        	var roleIds = $.form.selectCheckeds("role");
	        	$.ajax({
	        		cache : true,
	        		type : "POST",
	        		url :  "/userInfo/edit",
	        		data : {
		        		"uid" : uid,
	        			"username": username,
	        			"name" : name,
	        			"state" : state,
	        			"roleIds" : roleIds,
	        			"position" : position
	        		},
	        		async : false,
	        		error : function(request) {
	        			$.modal.alertError("系统错误");
	        		},
	        		success : function(data) {
	        			$.operate.successCallback(data);
	        		}
	        	});
	        }
	</script>
</body>
</html>
